<template>
  <div>
    <el-container>
      <el-header class="head">
        <self-top></self-top>
      </el-header>

      <el-container>
        <el-main width="800" class="main">
          <div v-if="this.$route.path === '/home/index'">
            <el-row :gutter="15" style="padding: 10px;">
              <el-col :span="14">
                <div class="column-title">
                  <el-row>
                    <el-col :span="11">我接收的任务</el-col>
                    <el-col :span="2">任务明细</el-col>
                    <el-col :span="11">我发布的任务</el-col>
                  </el-row>
                </div>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <div class="received-tasks">
                      <my-receive></my-receive>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="published-tasks">
                      <my-publish></my-publish>
                    </div>
                  </el-col>
                </el-row>
              </el-col>

              <el-col :span="10">
                <div>
                  <el-carousel :interval="5000" arrow="always">
                    <el-carousel-item v-for="item in 4" :key="item">
                      <h3 text="2xl" justify="center">{{ item }}</h3>
                    </el-carousel-item>
                  </el-carousel>
                </div>
                <div style="margin-top: 12%;">
                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-input clearable placeholder="搜索任务名称" v-model="searchName"
                                clearableclear="getTaskList"></el-input>
                    </el-col>
                    <el-col :span="8">
                      <el-input clearable placeholder="搜索任务明细" v-model="searchDesc"
                                clearableclear="getTaskList"></el-input>
                    </el-col>
                    <el-col :span="3">
                      <el-button :loading="buttonSending" type="primary" @click="getTaskList()">
                        搜索任务
                        <el-icon>
                          <Search/>
                        </el-icon>
                      </el-button>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
            </el-row>
            <el-divider style="background-color: #101010;margin-bottom: 30px;" content-position="center">新的任务
            </el-divider>

            <el-row :gutter="30">
              <el-col :span="6" v-for="(item, index) in currentPageData" :key="index">
                <div class="content">
                  <div>
                    <h3>{{ item.taskName }}</h3>
                    <p>{{ item.taskDesc }}</p>

                    <el-popover effect="light" trigger="hover" placement="top" width="auto" arrow-class="my-arrow"
                                popper-class="my-popper">
                      <template #default>
                        <div>任务明细: {{ item.taskDesc }}</div>
                        <div>发布人: {{ item.publisher }}</div>
                        <div>任务报酬: {{ item.salary }}</div>
                        <div>任务级别: {{ item.level }}</div>
                        <div>截止时间: {{ item.deadline }}</div>
                        <b style=" color: yellow;">点击以进入明细页</b>
                      </template>
                      <template #reference>
                        <el-button @click="showDetail(item)">任务明细</el-button>
                      </template>
                    </el-popover>
                  </div>
                </div>
              </el-col>
            </el-row>
            <!-- 分页模块 -->
            <div style="display:flex;justify-content:center;padding: 10px;margin-bottom: 25px;">
              <el-pagination
                  v-model:current-page="pageNo"
                  v-model:page-size="pageSize"
                  :page-sizes="[12, 24, 48, 96]"
                  :small="false"
                  :disabled="false"
                  :background="true"
                  layout="total, sizes, prev, pager, next"
                  :total="totalCount"
              />
            </div>
          </div>
          <div v-else>
            <router-view></router-view>
          </div>
        </el-main>
        <!-- <el-footer><selfFooter></selfFooter></el-footer> -->
      </el-container>
    </el-container>
  </div>
</template>

<script>
import selfTop from '../layout/selfTop.vue';
import selfFooter from '../layout/selfFooter.vue';
import myPublish from './myPublish.vue';
import myReceive from './myReceive.vue';
import {getTaskList} from '@/api/task';

import store from '@/store/index';
import {ElMessage} from 'element-plus';

export default {
  name: 'Home',
  components: {
    selfTop,
    myPublish,
    myReceive,
  },
  methods: {
    handleSelect() {
    },
    showDetail(item) {
      store.commit('MUTATION_TASK_DETAIL', item);
      this.$router.push('/home/task-detail');
    },
    getTaskList() {
      this.buttonSending = true
      this.searchStr = {
        name: this.searchName,
        desc: this.searchDesc
      };
      const param = {page: this.pageNo, limit: this.pageSize, searchStr: this.searchStr, state: 'unfinished'};
      getTaskList(param).then(resp => {
        if (resp.success) {
          this.totalCount = resp.total;
          this.taskList = resp.rows;
        }
      });
      this.buttonSending = false
    },
  },
  data() {
    return {
      pageNo: 1,
      pageSize: 12,
      totalCount: 0,

      buttonSending: false,

      taskList: [],
      searchName: '',
      searchDesc: ''
    };
  },
  computed: {
    currentPageData() {
      const startIndex = (this.pageNo - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.taskList.slice(startIndex, endIndex);
    }
  },
  mounted() {
    ElMessage.success('欢迎访问门户页面');
    // console.log(this.$route);
    // console.log(this.$route.fullPath.split("/").pop() != 'index');
    if (this.$route.fullPath.split("/").pop() != 'index') {
      return
    } else {
      this.$nextTick(() => {
        this.getTaskList()
      });
    }
  }
};
</script>

<style scoped>
.content {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  margin-bottom: 30px;
}

body {
  margin: 0px;
}

.el-menu {
  border-right: solid 1px #0f0e0e;
}

.el-menu.el-menu--horizontal {
  border-bottom: solid 1px #0a0a0a;
}

.el-aside {
  width: 250px;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.column-title {
  height: 30px;
  background-color: #f5f5f5;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

.received-tasks {
  position: relative;
  height: 400px;
  background-color: #c7dde6;
  border-radius: 4px;
  padding: 5px;
  box-sizing: border-box;
  text-align: center;
  color: #333;
}

.published-tasks {
  position: relative;
  height: 400px;
  background-color: #ffc398;
  border-radius: 4px;
  padding: 5px;
  box-sizing: border-box;
  text-align: center;
  color: #333;
}
</style>
<style>
.el-pagination__total {
  color: white;
}

.mask {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.tip {
  color: #eaeaea;
  font-size: 26px;
  text-align: center;
  cursor: pointer;
}
</style>
